<template>
  <div class="kxz-dialog--myd">
    <el-dialog :title="`客服满意度调查（${PkfName}）`" :visible.sync="sDialog" @close="emCloseDialog">
      <com-table>
        <table>
          <tr>
            <th colspan="5">呼入满意统计</th>
          </tr>
          <tr>
            <td>未评价</td>
            <td>满意</td>
            <td>基本满意</td>
            <td>不满意</td>
            <td>未进行满意度调查</td>
          </tr>
          <tr>
            <td v-for="n in 5" :key="n">{{PmydData[`callin_${n === 5 ? 44 : (n - 1)}`] || '暂无数据'}}</td>
          </tr>
        </table>
        <table class="bTable">
          <tr>
            <th colspan="5">呼出满意统计</th>
          </tr>
          <tr>
            <td>未评价</td>
            <td>满意</td>
            <td>基本满意</td>
            <td>不满意</td>
            <td>未进行满意度调查</td>
          </tr>
          <tr>
            <td v-for="n in 5" :key="n">{{PmydData[`callout_${n === 5 ? 44 : (n - 1)}`|| '暂无数据']}}</td>
          </tr>
        </table>
      </com-table>
    </el-dialog>
  </div>
</template>

<script>
import ComTable from '../comTable'
export default {
  name: 'myd',
  props: {
    PsDialog: Boolean,
    PkfName: String,
    PmydData: Object
  },
  data() {
    return {
      sDialog: this.PsDialog
    }
  },
  watch: {
    PsDialog(val) {
      this.sDialog = val
    }
  },
  components: {
    ComTable
  },
  methods: {
    emCloseDialog() {
      this.$emit('oncloseDialog')
    }
  }
}
</script>

<style lang="scss">
.kxz-dialog--myd {
  $color: #444;
  .el-dialog {
    border-radius: 8px;
    box-shadow: 0 1px 30px rgba(0, 0, 0, .3);
  }
  .el-dialog--small{
    width:60%;
  }
  .el-dialog__title {
    font-weight: normal;
    color: $color;
  }
  .el-dialog__header {
    padding: 30px 30px 0;
  }
  .el-dialog__body {
    padding: 30px 30px 0;
    color: $color;
    font-size: 16px;
  }
  .bTable {
    margin: 20px 0 30px;
  }
  td {
    color: #444 !important;
  }
}
</style>

